<template>
  <div class="circle-item">
    <edu-avatar
      :src="datas.avatar_url"
      :size="40"
      :show-level="$util.isDef(datas.is_vip) && datas.is_vip == 1"
      :level-icon-size="14"
      @click="goUser(datas.user_id)"
    ></edu-avatar>
    <div class="circle-item-main">
      <div class="control">
        <div class="name" @click="goUser(datas.user_id)">{{ datas.nick_name }}</div>
        <template v-if="showDelete && is_user">
          <el-popover
            placement="bottom-end"
            :width="80"
            trigger="click"
            :visible-arrow="false"
            popper-class="circle-item-content-dynamic-popover"
          >
            <div class="del-text" @click="onDelete">删除动态</div>
            <div slot="reference" class="del-btn el-icon-more"></div>
          </el-popover>
        </template>
        <div
          v-if="showFollow && !is_user"
          :class="datas.followed == 1 ? 'no' : 'yes'"
          class="con-btn"
          @click="onFollowed"
        >
          <i v-if="datas.followed == 0" class="el-icon-plus"></i
          >{{ datas.followed == 1 ? '已关注' : '关注' }}
        </div>
      </div>

      <div class="signature">
        <template v-if="$util.isDef(datas.reply_user_name)">
          回复<span class="reply-name">@{{ datas.reply_user_name }}</span
          >：
        </template>
        <template v-if="contentLength > 0 && datas.content.length > contentLength">
          <span v-if="isCollapsed" v-html="delHtmlTag(datas.content, contentLength)"></span>
          <span v-else v-html="delHtmlTag(datas.content)"></span>
        </template>
        <template v-else>
          <span v-html="delHtmlTag(datas.content)"></span>
        </template>
        <span
          v-if="contentLength > 0 && datas.content.length > contentLength"
          class="btn"
          @click="toggleContent"
        >
          {{ isCollapsed ? '展开' : '收起' }}
        </span>
      </div>

      <div v-if="datas.attach_url.length > 0" class="picture">
        <div class="col" v-for="(item, index) in datas.attach_url" :key="index">
          <edu-image :src="item" :preview-src-list="datas.attach_url"></edu-image>
        </div>
      </div>

      <!-- 转载内容 -->
      <div v-if="$util.isDef(datas.type) && datas.type == 2" class="orignal-wrap">
        <div v-if="$util.isUndef(datas.orignal_user)" class="del-text">
          该内容已被删除，无法查看。
        </div>
        <template v-else>
          <div class="signature">
            <span class="reply-user">@{{ datas.orignal_user }}</span>
            <template v-if="contentLength > 0 && datas.orignal_content.length > contentLength">
              <span
                v-if="isOrignalCollapsed"
                v-html="delHtmlTag(datas.orignal_content, contentLength)"
              ></span>
              <span v-else v-html="delHtmlTag(datas.orignal_content)"></span>
            </template>
            <template v-else>
              <span v-html="delHtmlTag(datas.orignal_content)"></span>
            </template>
            <span
              v-if="contentLength > 0 && datas.orignal_content.length > contentLength"
              class="btn"
              @click="toggleOrignalContent"
            >
              {{ isOrignalCollapsed ? '展开' : '收起' }}
            </span>
          </div>
          <div v-if="datas.orignal_attach.length > 0" class="picture">
            <div class="col" v-for="(item, index) in datas.orignal_attach" :key="index">
              <edu-image :src="item" :preview-src-list="datas.orignal_attach"></edu-image>
            </div>
          </div>
        </template>
      </div>

      <div class="palette">
        <div class="time">{{ datas.create_time | formatTime('{y}年{m}月{d}日') }}</div>
        <div class="del" v-if="showReplyDelete && is_user" @click="delReplyDelete(datas)">
          删除
        </div>
        <div class="arrow">
          <div v-if="showShare" class="btn" @click="onRecircle">
            <i class="icon edu-icon-fenxiang1 edu-icon--left"></i
            ><span class="num">{{ datas.recircle_num }}</span>
          </div>
          <div class="btn" @click="toggleReply">
            <i
              :class="loading ? 'el-icon-loading' : 'edu-icon-pinglun'"
              class="icon edu-icon--left"
            ></i
            ><span v-if="$util.isDef(datas.comment_num)" class="num">{{ datas.comment_num }}</span>
          </div>
          <div class="btn" :class="{ active: datas.is_like == 1 }" @click="onLike">
            <i class="icon edu-icon-dianzan_active edu-icon--left"></i
            ><span class="num">{{ datas.like_num }}</span>
          </div>
        </div>
      </div>

      <transition name="el-fade-in-linear">
        <slot v-if="!loading && showReply" />
      </transition>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    datas: {
      type: Object,
      default: () => {}
    },
    // 是否显示删除
    showDelete: {
      type: Boolean,
      default: false
    },
    // 是否显示删除
    showReplyDelete: {
      type: Boolean,
      default: false
    },
    // 是否显示关注
    showFollow: {
      type: Boolean,
      default: false
    },
    // 是否显示分享
    showShare: {
      type: Boolean,
      default: false
    },
    // 文字的长度
    contentLength: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isCollapsed: true,
      isOrignalCollapsed: true,
      showReply: false,
      loading: false
    }
  },
  computed: {
    ...mapGetters({
      getUserInfo: 'user/accountInfo',
      isLogin: 'user/isLogin'
    }),
    showContent() {
      if (this.contentLength == 0) return false
      return this.datas.content.length > this.contentLength
    },
    // 当前用户是自己
    is_user() {
      if (!this.isLogin && this.$util.isEmpty(this.getUserInfo)) return false
      return this.getUserInfo.id === this.datas.user_id
    }
  },
  methods: {
    // 内容展开/收起
    toggleContent() {
      this.isCollapsed = !this.isCollapsed
    },
    // 回复展开/收起
    toggleOrignalContent() {
      this.isOrignalCollapsed = !this.isOrignalCollapsed
    },
    // 获取圈子回复列表数据
    getCircleReplyList() {
      this.loading = true
      this.$api.getCircle(
        {
          circle_id: this.datas.id,
          page: 1,
          count: 100
        },
        res => {
          this.datas.list = res.data.comment.data
          setTimeout(() => {
            this.loading = false
          }, 200)
        }
      )
    },
    // 展开/收起 回复
    toggleReply() {
      this.showReply = !this.showReply
      if (
        this.$util.isDef(this.datas.list) &&
        this.$util.isDef(this.datas.comment_num) &&
        this.datas.comment_num > 0
      ) {
        this.getCircleReplyList()
      }
    },
    // 分享
    onRecircle() {
      this.$globalToLogin(() => {
        this.$emit('onForward', this.datas.id)
      })
    },
    // 删除
    onDelete() {
      this.$emit('onDelete', this.datas.id)
    },
    // 点赞
    onLike() {
      this.$globalToLogin(() => {
        if (this.datas.is_like == 1) {
          this.datas.is_like = 0
          this.datas.like_num -= 1
        } else {
          this.datas.is_like = 1
          this.datas.like_num += 1
        }
        this.$emit('onLike', {
          obj_id: this.datas.id,
          status: this.datas.is_like
        })
      })
    },
    // 关注
    onFollowed() {
      this.$globalToLogin(() => {
        if (this.datas.followed == 1) {
          this.datas.followed = 0
          this.$api.deleteFollow(
            {
              user_id: this.datas.user_id
            },
            res => {
              this.$message.success(res.msg)
            }
          )
        } else {
          this.datas.followed = 1
          this.$api.createFollow(
            {
              user_id: this.datas.user_id
            },
            res => {
              this.$message.success(res.msg)
            }
          )
        }
      })
    },
    // 删除
    delReplyDelete(item) {
      this.$emit('onDeleteReply', item.id)
    },
    // 点击头像
    goUser(id) {
      this.$router.push({
        path: '/user',
        query: {
          id: id
        }
      })
    },
    delHtmlTag(html = '', len = 0) {
      if (len > 0 && html.length > len) {
        let text = html.substring(0, len) + '...'
        return text.replace(/\n/g, '<br/>')
      } else {
        return html.replace(/\n/g, '<br/>')
      }
    }
  }
}
</script>
<style lang="scss">
.circle-item-content-dynamic-popover {
  min-width: 80px;
  .del-text {
    font-size: 14px;
    font-weight: 400;
    color: $text-color-import;
    line-height: 21px;
    text-align: center;
    cursor: pointer;
    &:hover {
      @include edu-color-primary;
    }
  }
}
</style>
<style lang="scss" scoped>
.circle-item + .circle-item {
  margin-top: 20px;
}
.circle-item:last-child .circle-item-main {
  padding-bottom: 0;
  border-bottom: none;
}
.circle-item {
  display: flex;
  align-items: flex-start;

  .circle-item-main {
    flex: 1;
    min-width: 0;
    margin-left: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
    .control {
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .name {
        font-size: 13px;
        font-weight: 400;
        color: $text-color-auxiliary;
        line-height: 20px;
        cursor: pointer;
      }
      .del-btn {
        color: $text-color-auxiliary;
        font-size: 16px;
        cursor: pointer;
      }
      .con-btn {
        width: 46px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        border-radius: 2px;
        border-width: 1px;
        border-style: solid;
        cursor: pointer;
        &.yes {
          @include edu-color-primary;
          @include edu-color-primary(border-color);
        }
        &.no {
          color: #b7bac1;
          border-color: #b7bac1;
        }
      }
    }
    .signature {
      @include clearfix;
      font-size: 14px;
      font-weight: 400;
      color: $text-color-import;
      line-height: 22px;
      .reply-name {
        color: $text-color-secondary;
      }
      .reply-user {
        @include edu-color-primary;
      }
      .btn {
        cursor: pointer;
        @include edu-color-primary;
      }
    }
    .orignal-wrap {
      margin-block: 16px;
      padding: 15px;
      background: #f7f7f7;
      .del-text {
        font-size: 14px;
        font-weight: 400;
        color: $text-color-import;
        line-height: 22px;
      }
    }
    .picture {
      margin-top: 20px;
      width: 320px;
      display: grid;
      grid-gap: 10px;
      grid-template-columns: repeat(3, minmax(0px, 1fr));
      .col {
        grid-column: span 1 / span 1;
        .el-image {
          width: 100px;
          height: 100px;
        }
      }
    }
    .palette {
      display: flex;
      align-items: center;
      margin-top: 20px;
      .time {
        font-size: 13px;
        font-weight: 400;
        color: $text-color-auxiliary;
        line-height: 20px;
      }
      .del {
        font-size: 13px;
        font-weight: 400;
        color: #606266;
        cursor: pointer;
        margin-left: 30px;
      }
      .arrow {
        margin-left: auto;
        width: 143px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .btn {
          display: flex;
          align-items: center;
          cursor: pointer;
          .icon {
            font-size: 18px;
            color: $text-color-auxiliary;
          }
          .num {
            font-size: 12px;
            font-weight: 400;
            color: $text-color-auxiliary;
          }
          &.active {
            .icon {
              @include edu-color-primary;
            }
          }
        }
      }
    }
  }
}
</style>
